<style>
  table {text-align:center;}
  thead tr{}
  tbody tr:nth-child(even){background:#F5F5F5;}
  tbody tr:nth-child(odd){background:#EECFA1;}
</style>
<template>
  <div>
      <div style="width:40%;float: left;">
        <div>
          <div>手动查询目标:</div>
          <div>
            <Input  clearable placeholder="" v-model='input_aims'  class="search-input" style="width:58%"/>
            &nbsp;
            <Button v-on:click='manualQuery()'>查询</Button></div>
        </div>
        <div>
            <div>查询结果:</div>
            <div>{{search_result}}</div>
        </div>
      </div>
      <div style="width:59%;float: left;">
          <div>自动巡查:</div>
          <div style="margin-top:5px ">&nbsp;&nbsp;&nbsp;&nbsp;巡查周期:<select  v-model="select_cycle">
            <option v-for="n in 12" v-bind:value="n">{{n}}小时</option>
          </select></div>
          <div style="margin-top:5px ">&nbsp;&nbsp;&nbsp;&nbsp;巡查次数:<select  v-model="select_count">
            <option v-for="n in 12" v-bind:value="n">{{n}}次数</option>
          </select></div>
          <div style="margin-top:5px ">
          <Button v-on:click='automaticPatrol(1)'>开始</Button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <Button v-on:click='automaticPatrol(0)'>停止</Button>
        </div>
    </div>
    <div style="width: 100%;">

       <div style="height:200px;border:1px solid;width:99%;overflow: scroll;margin-top:10px">
            <table style="width:100%;">
              <thead>
                <tr style="">

                  <th>姓名</th>
                  <th>电话号码</th>
                  <th>身份证</th>
                  <th>居住地址</th>
                  <th>活动区域</th>
                  <th>运营商</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                  <tr v-for="val in updateAndQueryTargets" v-bind:id="val.id">
                    <td>{{val.name}}</td>
                    <td>{{val.phone}}</td>
                    <td>{{val.identityCard}}</td>
                    <td>{{val.address}}</td>
                    <td>{{val.activityArea}}</td>
                    <td>
                      {{operator_list[val.operator]}}
                    </td>
                    <td>
                      <button v-on:click='edit(val.id,val.name,val.phone,val.identityCard,val.address,val.activityArea)' style="background-color: #1c84c6;border-color: #1c84c6;color: #FFF;">编辑</button>
                      &nbsp;&nbsp;
                      <button  v-on:click='del(val.id)' style="background-color: #ed5565;border-color: #ed5565;color: #FFF;">删除</button>
                    </td>
                  </tr>
              </tbody>
            </table>
          </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
export default {
  data () {
    return {
      updateAndQueryTargets: '',
      select_cycle: '1',
      select_count: '1',
      input_aims: '',
      search_result: '',
      'select_status': false,
      'setInterval_obj': false,
      'operator_list': { '0': '移动', '1': '联通', '2': '电信' }
    }
  },
  created () {
    var url = '/api/targetStaff/updateAndQueryTargets'
    axios.get(url)
      .then(res => {
        if (res.data.success == true) {
          this.updateAndQueryTargets = res.data.targetList
        } else {
          alert('目标人员数量查询失败:' + res.data.errMsg)
        }
      })
    setInterval(function () {
      axios.get(url)
        .then(res => {
          if (res.data.success == true) {
            this.updateAndQueryTargets = res.data.targetList
          } else {
            alert('目标人员数量查询失败:' + res.data.errMsg)
          }
        })
    }, 5000)
  },
  methods: {
    edit (id, name, phone, identityCard, address, activityArea) {
      var parames = { id: id, name: name, phone, phone, identityCard: identityCard, address: address, activityArea: activityArea }

      this.$router.push({ path: '/target-person-edit', query: parames })
    },
    del (id) {
      var url = '/api/targetStaff/deleteTargetStaff'
      var parames = { id: id }
      axios.post(url, parames)
        .then(res => {
          if (res.data.success == true) {
            document.getElementById(id).remove()
            alert('删除成功')
          } else {
            alert(res.data.errMsg)
          }
        })
    },
    automaticPatrol (operation) {
      var select_count = this.select_count
      var select_cycle = this.select_cycle
      var parames = {
        operation: operation,
        cycle: select_cycle,
        count: select_count
      }
      if (operation == 1) {
        if (this.select_status == true) {
          return
        }
      }
      axios.post('/api/targetStaff/sendAutomaticPatrol', parames)
        .then(res => {
          if (res.data.success == true) {
            if (operation == 1) {
              alert('开始成功')
              this.select_status = true
            } else {
              this.select_status = false
              alert('停止成功')
            }
          } else {
            alert(res.data.errMsg)
          }
        })
    },
    manualQuery () {
      if (this.select_status == true) {
        return
      }
      var phoneNum = this.input_aims
      var parames = {
        phoneNum: phoneNum
      }
      axios.post('/api/targetStaff/updateAndQueryTargets', parames)
        .then(res => {
          if (res.data.success == true) {
            this.search_result = res.data.region + res.data.tac
          } else {
            alert(res.data.errMsg)
          }
        })
      if (this.setInterval_obj != false) {
        clearInterval(this.setInterval_obj)
      }
      this.setInterval_obj = setInterval(function () {
        axios.post('/api/targetStaff/updateAndQueryTargets', parames)
          .then(res => {
            if (res.data.success == true) {
              this.search_result = res.data.region + res.data.tac
            } else {
              // alert(res.data.errMsg)
            }
          })
      }, 10000)
    }
  }
}
</script>

<style>

</style>
